<template>
	<div class="address">
		<el-cascader 
		:show-all-levels="childrenType==1?false:true" 
		:style="addStyle" v-model="values" 
		:disabled="disabled" 
		:options="options" 
		:props="cascaderProps" 
		:placeholder="placeholder" 
		class="address" 
		clearable 
		@change="change" 
		@expand-change="expandchange" 
		ref="cascader"
		popper-class="address_cascader"></el-cascader>
	</div>
</template>

<script>
import Vue from 'vue'
	import addressListData from '../utils/address'
	const addressData = new addressListData()
	export default {
		name: 'addressCascader',
		props: {
			value: {
				type: Array,
				default: []
			},
			checkStrictly:{
				type: Boolean,
				default: false
			},
			multiple:{
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请选择地址'
			},
			disabled:{
				type: Boolean,
				default: false
			},
			addStyle:{
				type: String,
				default: ''
			},
			childrenType:{//为1时仅选择到城市
				type:Number
			}
		},
		data() {
			return {
				values: [],
				options: [],
				cascaderProps: {
					checkStrictly: this.checkStrictly,
					multiple: this.multiple,
				}
			}
		},
		mounted() {
			setTimeout(()=>{
				if(this.childrenType == 1){
					addressData.addProvinceData(1)
				}else{
					addressData.addProvinceData()
				}
				setTimeout(()=>{
					this.options = addressData.data
				},300)
			},300)
		},
		watch:{
			value:{
				handler(newdata) {
					if(this.value && this.value.length > 0){
						this.values = newdata
						addressData.setDefaultValue(this.value)
						setTimeout(()=>{
							if(this.childrenType == 1){
								addressData.addProvinceData(1)
							}else{
								addressData.addProvinceData()
							}

							setTimeout(()=>{
								this.options = addressData.data
							},300)
							
						},300)
					}
    			},
    			immediate: true,
    			deep: true
			},
			values:{
				handler(newdata) {
					if(newdata.length < 1){
						let address = {
							key: '',
							text: ''
						}
						this.$emit('getAddressData', address)
					}
				},
				immediate: true,
    			deep: true
			}
		},
		methods: {
			change(){
				if(this.values.length > 0){
					let selectAddress = this.$refs.cascader.getCheckedNodes()[0]
					let address = {
						key: selectAddress.path.join('/'),
						text: selectAddress.pathLabels.join('/')
					}
					this.$emit('getAddressData', address)
				}
				
			},
			expandchange(e) {
				// console.log(e)
				this.options.filter(item=>{
					if(item.value == e[0] && item.children.length < 1){
						addressData.addCityData(item,e).then(res=>{})
						if(this.childrenType == 1){
							this.options.forEach(item =>{
							if(item.children){
								item.children.forEach(val =>{
									if(val.children){
										delete val.children
									}
								})
							}
							})
						}
					} else if(item.value == e[0] && item.children.length > 0){
						if(this.childrenType != 1){
							this.s(item.children, e)
						}
					}
				})
			},
			s(item, e){
				item.filter(item=>{
					if(item.value == e[1] && item.children.length < 1){
						addressData.addCityData(item,e).then(res=>{})
					} else if(item.value == e[1] && item.children.length > 0){
						if(this.childrenType != 1){
							this.z(item.children, e)
						}
						
					}
				})
			},
			z(item, e){
				item.filter(item=>{
					if(item.value == e[e.length - 1]){
						if(this.childrenType != 1){
							addressData.addCityData(item,e).then(res=>{})
						}
						
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.address{
		width: 100%;
	}
</style>
